import 'ol/ol.css';
// default path is node_modules
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { Vector as VectorLayer } from 'ol/layer';
import OSM from 'ol/source/OSM';
// import { MAP_SOURCE } from '@/config/env';
// import { fromLonLat, toLonLat } from 'ol/proj.js';
import { fromLonLat } from 'ol/proj';

import { Draw, Modify, Snap } from 'ol/interaction';
import { Vector as VectorSource } from 'ol/source';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { constants } from 'os';

export default {
    data() {
        return {}
    },

    mounted() {
        // 杭州
        let pos = fromLonLat([120.267126, 30.191141]);
        let gaodeMapLayer = new TileLayer({
            source: new OSM({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            })
        });

        let source = new VectorSource();
        let vector = new VectorLayer({
            source: source,
            style: new Style({
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new CircleStyle({
                    radius: 7,
                    fill: new Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        let map = new Map({
            target: 'map',
            layers: [gaodeMapLayer, vector],
            view: new View({
                // 深圳
                center: pos,
                zoom: 12
            })
        })

        let modify = new Modify({
            source: source
        });
        map.addInteraction(modify);

        let draw, snap; // global so we can remove them later
        let typeSelect = document.getElementById('type');

        function addInteractions() {
            draw = new Draw({
                source: source,
                type: typeSelect.value
            });
            map.addInteraction(draw);
            snap = new Snap({
                source: source
            });
            map.addInteraction(snap);
            console.log(source.getFeatures())
        }

        /**
         * Handle change event.
         */
        typeSelect.onchange = function() {
            map.removeInteraction(draw);
            map.removeInteraction(snap);
            addInteractions();
        };

        addInteractions();
        // document.write(OSM)
    },
    beforeDestroy() {

    },
    methods: {
        come() {
            alert(100)
        }
    }
}
